<template>
	<!-- #ifdef MP-WEIXIN -->
	<view class="search_box"
		:style="{'margin-top':`calc(${menuButtonInfo.top}px - (80rpx - ${menuButtonInfo.height}px)/2)`,'width':`calc(${menuButtonInfo.left}px - 2 * (100% - ${menuButtonInfo.right}px))`,'margin-left':`calc(100% - ${menuButtonInfo.right}px)`}">
		<navigator class="msg_box" open-type="navigateBack" delta="1">
			<image src="/static/icon/back.png"></image>
		</navigator>
		<navigator class="input_box" url="/pages/search/search">
			<image src="/static/icon/magnifier.png" class="magnifier"></image>
			<view class="input" style="color: #90A1B9;">微信立减金</view>
		</navigator>
		<navigator url="/pages/search/search">搜索</navigator>
	</view>
	<!-- #endif -->
	<!-- #ifndef MP-WEIXIN -->
	<view class="search_box" style="margin-left: 36rpx;margin-right: 36rpx;width: 678rpx;padding-top: 30rpx;">
		<navigator class="input_box" url="/pages/search/search">
			<image src="/static/icon/magnifier.png" class="magnifier"></image>
			<view class="input" style="color: #90A1B9;">微信立减金</view>
		</navigator>
		<navigator url="/pages/search/search">搜索</navigator>
	</view>
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<scroll-view class="menu_box safe" direction="vertical" scroll-y
		:style="{'top':`calc(${menuButtonInfo.top}px + ${menuButtonInfo.height/2}px + 60rpx )`}">
	<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<scroll-view class="menu_box safe" direction="vertical" scroll-y style="top: 140rpx;">
		<!-- #endif -->
			<view :class="['item',menuIndex==index?'active':'']" @tap="menuIndex=index" v-for="(item,index) in menuList"
				:key="item" :style="{'background-color': (index<=menuIndex+1 && index>=menuIndex-1)?'#F1F5F9':''}">
				<view
					:style="{'border-top-right-radius':(index==menuIndex+1)?'30rpx':0,'border-bottom-right-radius':(index==menuIndex-1)?'30rpx':0,'background-color': menuIndex==index?'#F1F5F9':'#ffffff'}">
					{{item}}
				</view>
			</view>
			<view class="item" :style="{'background-color': (menuIndex==menuList.length-1)?'#F1F5F9':''}">
				<view
					:style="{'border-top-right-radius':(menuIndex==menuList.length-1)?'30rpx':0,'background-color': '#ffffff'}">
				</view>
			</view>
		</scroll-view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="content_box" id="content_box"
			:style="{'top':`calc(${menuButtonInfo.top}px + ${menuButtonInfo.height/2}px + 60rpx )`}">
		<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="content_box" style="top: 140rpx;" id="content_box">
			<!-- #endif -->
				<template v-for="(item,index) in menuList" :key="item">
					<view class="custom-scroll" @touchstart="handleTouchStart" @touchmove="handleTouchMove"
						@touchend="handleTouchEnd" :style="{transform: `translateY(${offsetY}px)`}"
						v-if="index==menuIndex">
						<view class="bottom_txt" style="bottom: 100%;" v-if="index>0">
							<image src="/static/icon/jiantou_1.png" />
							下拉继续浏览<text>{{menuList[index-1]}}</text>
						</view>
						<scroll-view @scroll="scroll" scroll-y direction="vertical" class="list_box safe"
							:scroll-into-view="intoId" scroll-with-animation>
							<template v-if="index==0">
								<view class="box1" id="re">
									<image src="/static/category/bg1.png" style="width: 100%;" mode="widthFix" />
									<view class="box1_menu_box">
										<view v-for="item in hotCategoryConfig?.hot_1" :key="item.id"
											@click="selectedInfo=null;selectedBrand=item;">
											<image :src="item.imgUrl" lazy-load></image>{{item.name}}
										</view>
									</view>
								</view>
								<view class="box1" style="margin-top: 20rpx;border-radius: 30rpx 0 0 30rpx;">
									<image src="/static/category/bg2.png" style="width: 100%;" mode="widthFix" />
									<scroll-view direction="horizontal" scroll-x
										style="width: 100%;height: auto;padding: 0 0 36rpx 36rpx;box-sizing: border-box;white-space: nowrap;">
										<view class="huadong">
											<template v-for="(item,index) in hotCategoryConfig?.hot_2" :key="item.id">
												<view class="i" v-if="index<3"
													@click="selectedBrand=null;selectedInfo=item">
													<view>
														<image class="logo" :src="item.imgUrl" lazy-load></image>
														<view class="paiming">
															<image :src="`/static/icon/ranked_${index+1}.png`"></image>
															<view :style="{'color':index<2?'#ffffff':'#020618'}">
																{{index+1}}
															</view>
														</view>
													</view><text>{{item.name}}</text>
												</view>
											</template>
										</view>
										<view class="huadong">
											<template v-for="(item,index) in hotCategoryConfig?.hot_2" :key="item.id">
												<view class="i" v-if="index>2"
													@click="selectedBrand=null;selectedInfo=item">
													<view>
														<image class="logo" :src="item.imgUrl" lazy-load></image>
														<view class="paiming">
															<image src="/static/icon/ranked_4.png"></image>
															<view>{{index+1}}</view>
														</view>
													</view><text>{{item.name}}</text>
												</view>
											</template>
										</view>
									</scroll-view>
								</view>
								<!-- #ifdef MP-WEIXIN -->
								<image src="https://cdn.meijingnet.cn/huishou/static/img/card_3.png" mode="widthFix"
									style="width: 100%;margin: 20rpx 0 0 0;" @click="customerService" />
								<!-- #endif -->
								<view class="box2" style="padding: 36rpx 0;margin-top: 20rpx;">
									<view class="title" style="padding: 0 36rpx;">全部</view>
									<template v-for="(value,key) in categoryInfo?.initialToProducts" :key="key">
										<view class="sub_title" :id="key">{{key}}</view>
										<view class="item1" v-for="item in value" :key="item.id"
											@click="selectedBrand=null;selectedInfo=item">
											<image :src="item.imageUrl" lazy-load />{{item.name}}
										</view>
									</template>
								</view>
							</template>
							<template v-else>
								<view class="box2">
									<view class="title">{{item}}</view>
									<view class="grid_box">
										<view @click="selectedBrand=null;selectedInfo=item"
											v-for="item in categoryInfo?.categoryProductMap[menuList[index]]"
											:key="item.id">
											<image :src="item.imageUrl" lazy-load />{{item.name}}
										</view>
									</view>
								</view>
							</template>
						</scroll-view>
						<view class="bottom_txt" style="top: 100%;" v-if="index<menuList.length-1">
							<image src="/static/icon/jiantou_1.png" style="transform: rotate(180deg);" />
							上拉继续浏览<text>{{menuList[index+1]}}</text>
						</view>
					</view>
				</template>
				<view class="ce" v-if="menuIndex==0">
					<view :style="{'background-color': intoId=='re'?'#FFDF20':'transparent'}" @click="intoId='re'">热
					</view>
					<view :style="{'background-color': intoId==key?'#FFDF20':'transparent'}"
						v-for="(value,key) in categoryInfo?.initialToProducts" :key="key" @click="intoId=key">{{key}}
					</view>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view
				:style="{'top':`calc(${menuButtonInfo.top}px + ${menuButtonInfo.height/2}px + 60rpx )`,'left':(selectedInfo || selectedBrand)?0:'750rpx'}"
				class="cemian">
			<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view :style="{'top':'140rpx','left':(selectedInfo || selectedBrand)?0:'750rpx'}" class="cemian">
				<!-- #endif -->
					<view class="back" @click="selectedInfo=null;selectedBrand=null;">
						<image src="/static/icon/back_2.png" /><text>点</text><text>击</text><text>返</text><text>回</text>
					</view>
					<view class="neirong_box">
						<template v-if="selectedBrand">
							<view
								style="width: 100%;height: 120rpx;font-size: 34rpx;padding: 36rpx;box-sizing: border-box;display: flex;align-items: center;justify-content: flex-start;">
								热门品牌 - {{selectedBrand.name}}</view>
							<scroll-view class="neirong_list safe" scroll-y direction="vertical">
								<block v-for="(item,index) in categoryInfo.brandProductMap[selectedBrand.id]"
									:key="index">
									<view class="neirong_item" @click="item.open=!item.open">
										<image :src="item.imageUrl" lazy-load class="l"></image>
										<text class="t">{{item.name}}</text>
										<view class="r">
											选择面值
											<image src="/static/icon/to_right.png"
												:style="{'transform': `rotate(${item.open?'-':''}90deg)`}" />
										</view>
									</view>
									<view class="mianzhi_box" v-if="item.open">
										<navigator :url="'/pages/sell/sell?faceValueId='+_item.id"
											v-for="_item in categoryInfo?.faceValueMap[item.id]" :key="item.id">
											{{_item.amount}}元
										</navigator>
									</view>
								</block>
							</scroll-view>
						</template>
						<template v-if="selectedInfo">
							<view
								style="width: 100%;height: 120rpx;font-size: 34rpx;padding: 36rpx;box-sizing: border-box;display: flex;align-items: center;justify-content: flex-start;">
								请选择面值</view>
							<scroll-view class="neirong_list safe" scroll-y direction="vertical">
								<template>
									<navigator :url="'/pages/sell/sell?faceValueId='+item.id" class="neirong_item"
										v-for="item in categoryInfo?.faceValueMap[selectedInfo?.id]" :key="item.id">
										<image :src="selectedInfo?.imageUrl || selectedInfo?.imgUrl" lazy-load
											class="l">
										</image>
										<text class="t">{{selectedInfo?.name}} {{item.amount}}元</text>
									</navigator>
								</template>
							</scroll-view>
						</template>
					</view>
				</view>
				<view class="mask" v-if="showMingpian" @click="showMingpian=false">
				</view>
				<view class="mingpian_box" :style="{'bottom':showMingpian?0:'-700rpx'}">
					<view
						style="display: flex;align-items: center;justify-content: flex-end;height: 112rpx;width: 100%;padding: 36rpx;box-sizing: border-box;">
						<image src="/static/icon/close.png" style="height: 40rpx;width: 40rpx;"
							@click="showMingpian=false">
						</image>
					</view>
					<view style="font-size: 35rpx;font-weight: bold;height: 60rpx;line-height: 60rpx;">卡券回收有疑问？</view>
					<view
						style="font-size: 28rpx;font-weight: bold;height: 60rpx;line-height: 60rpx;color: #777777;margin: 20rpx 0 40rpx 0;">
						长按识别二维码，添加专属顾问</view>
					<image src="https://cdn.meijingnet.cn/huishou/static/img/customer_service.png"
						show-menu-by-longpress mode="heightFix" style="height: 300rpx;" lazy-load />
				</view>
				<!-- #ifdef MP-ALIPAY -->
				<contact-button tnt-inst-id="WSS_OvWE" scene="SCE00308723" size="100rpx" />
				<!-- #endif -->
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {},
				fanye: false,

				categoryInfo: {},
				menuList: [],
				menuIndex: 0,

				hotCategoryConfig: {},

				startY: 0,
				offsetY: 0,

				intoId: 're',

				selectedInfo: null,
				selectedBrand: null,
				showMingpian: false,

				contentBoxHeight: 0,
				canMove: true
			}
		},
		async onLoad(options) {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();

			let indexInfo = await getApp().getIndexInfo();

			let hotCategoryConfig = indexInfo.hotCategoryConfig;

			let excludeBrand = await getApp().getExcludeBrand();
			if (excludeBrand && excludeBrand.length>0) {
				hotCategoryConfig.hot_1 = hotCategoryConfig.hot_1.filter(i => excludeBrand.indexOf(i.id) == -1);
			}
			this.hotCategoryConfig = hotCategoryConfig;

			this.categoryInfo = await getApp().getCategoryInfo();

			let menuList = this.categoryInfo.category || [];
			this.menuList = menuList;
			if (options.menu) {
				for (let i = 0; i < this.menuList.length; i++) {
					if (this.menuList[i] == options.menu) {
						this.menuIndex = i;
						break;
					}
				}
			} else if (options.info) {
				let selectedInfo = JSON.parse(options.info)
				let id = selectedInfo.id;
				for (let key in this.categoryInfo.categoryProductMap) {
					for (let i of this.categoryInfo.categoryProductMap[key]) {
						if (i.id == id) {
							this.selectedInfo = i;
							break;
						}
					}
				}
			}
			let that = this;
			// 假设我们要通过ID获取组件高度
			let query; // 注意.in(this)用于指定查询的页面范围，this为当前组件实例
			// #ifdef MP-ALIPAY
			query = uni.createSelectorQuery(); // 注意.in(this)用于指定查询的页面范围，this为当前组件实例
			// #endif
			// #ifndef MP-ALIPAY
			query = uni.createSelectorQuery().in(this); // 注意.in(this)用于指定查询的页面范围，this为当前组件实例
			// #endif
			query.select('#content_box').boundingClientRect(function(rect) {
				that.contentBoxHeight = rect.height;
			}).exec();
		},
		methods: {
			handleTouchStart(e) {
				this.startY = e.touches[0].clientY
			},
			handleTouchMove(e) {
				if (!this.canMove) {
					return;
				}
				const currentY = e.touches[0].clientY
				const deltaY = currentY - this.startY

				// 下拉逻辑
				if (deltaY > 0) {
					this.offsetY = deltaY * 0.5 // 添加阻尼效果
				}
				// 上拉逻辑
				else if (deltaY < 0) {
					this.offsetY = deltaY * 0.5
				}
				this.fanye = true;
			},
			handleTouchEnd(e) {
				if (!this.fanye || !this.canMove) {
					return;
				};

				this.fanye = false;
				const endY = e.changedTouches[0].clientY;
				const deltaY = endY - this.startY;
				if (deltaY > 0) {
					if (deltaY > 200 && this.menuIndex > 0) {
						this.menuIndex--;
						this.canMove = true;
					}
					this.offsetY = 0;

				} else if (deltaY < 0) {
					if (deltaY < -200 && this.menuIndex < this.menuList.length - 1) {
						this.menuIndex++;
						this.canMove = true;
					}
					this.offsetY = 0;
				}
			},
			scroll(e) {
				// #ifdef MP-ALIPAY
				this.canMove = e.detail.scrollTop == 0 || Math.abs(e.detail.scrollHeight - e.detail.scrollTop - this
					.contentBoxHeight) <= 2;
				// #endif
			},
			customerService() {
				getApp().customerService(this);
			},
		}
	}
</script>

<style>
	@import url('@/css/search.css');

	page {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.menu_box {
		width: 170rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #ffffff;
		border-top-right-radius: 30rpx;
		overflow: hidden;
	}

	.menu_box .item {
		width: 100%;
		height: 90rpx;
		font-size: 28rpx;
		color: #62748E;
	}

	.menu_box .item view {
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.menu_box .active {
		color: #020618;
	}

	.content_box {
		width: 580rpx;
		position: fixed;
		right: 0;
		bottom: 0;
		overflow: hidden;
	}

	.content_box .custom-scroll {
		transition: transform 0.3s ease-out;
		width: 100%;
		height: 100%;
		position: relative;
	}

	.content_box .custom-scroll .list_box {
		height: 100%;
		width: 580rpx;
		box-sizing: border-box;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.content_box .custom-scroll .list_box ::-webkit-scrollbar {
		width: 0;
	}

	.content_box .bottom_txt {
		height: 100px;
		width: 100%;
		position: absolute;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		font-size: 12px;
		color: #62748E;
	}

	.content_box .bottom_txt image {
		height: 16px;
		width: 16px;
	}

	.content_box .bottom_txt text {
		color: #020618;
	}

	.box1 {
		width: 100%;
		background-color: #ffffff;
		border-radius: 30rpx;
	}

	.box1 .box1_menu_box {
		width: 100%;
		padding: 0 36rpx 36rpx 36rpx;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(4, 100rpx);
		justify-content: space-between;
		row-gap: 23rpx;
	}

	.box1 .box1_menu_box>view {
		height: auto;
		width: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
	}

	.box1 .box1_menu_box>view image {
		height: 100rpx;
		width: 100rpx;
		margin-bottom: 10rpx;
	}

	.box1 .huadong {
		height: auto;
		padding-top: 20rpx;
		width: 340rpx;
		margin-right: 36rpx;
		display: inline-flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		gap: 36rpx;
	}

	.box1 .huadong:last-child {
		margin-right: 0;
	}

	.box1 .huadong .i {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 30rpx;
		font-size: 28rpx;
		line-height: 35rpx;
	}

	.box1 .huadong .i view {
		height: 80rpx;
		width: 80rpx;
		position: relative;
		flex-shrink: 0;
	}

	.box1 .huadong .i view .logo {
		height: 100%;
		width: 100%;
	}

	.box1 .huadong .i view .paiming {
		height: 40rpx;
		width: 40rpx;
		position: absolute;
		right: -20rpx;
		top: -20rpx;
	}

	.box1 .huadong .i view .paiming image {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.box1 .huadong .i view .paiming view {
		height: 40rpx;
		width: 40rpx;
		position: absolute;
		top: 0;
		left: 0;
		font-size: 24rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box1 .huadong .i text {
		flex: 1;
		white-space: pre-wrap;
	}

	.box2 {
		width: 100%;
		padding: 36rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		min-height: 100%;
		border-radius: 30rpx;
	}

	.title {
		height: 40rpx;
		line-height: 40rpx;
		width: 100%;
		font-size: 34rpx;
		font-weight: bold;
		margin-bottom: 36rpx;
	}

	.sub_title {
		height: 35rpx;
		line-height: 35rpx;
		width: 100%;
		background-color: #F8FAFC;
		padding: 0 36rpx;
		color: #62748E;
		font-size: 24rpx;
	}

	.item1 {
		height: 120rpx;
		width: 100%;
		padding: 0 36rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.item1 image {
		width: 80rpx;
		height: 80rpx;
	}

	.ce {
		width: 40rpx;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
	}

	.ce view {
		height: 32rpx;
		width: 32rpx;
		border-radius: 50%;
		font-size: 20rpx;
		color: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.grid_box {
		display: grid;
		grid-template-columns: repeat(3, 150rpx);
		row-gap: 36rpx;
		width: 100%;
		justify-content: space-between;
	}

	.grid_box view {
		width: 150rpx;
		font-size: 24rpx;
		line-height: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		text-align: center;
	}

	.grid_box view image {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 10rpx;
	}

	.cemian {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		transition: 0.5s;
	}

	.cemian .back {
		width: 90rpx;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 10rpx;
		color: #ffffff;
		font-size: 24rpx;
		background-color: rgba(0, 0, 0, 0.8);
	}

	.cemian .back image {
		height: 32rpx;
		width: 32rpx;
	}

	.cemian .neirong_box {
		background-color: #ffffff;
		width: 660rpx;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
	}

	.cemian .neirong_box .neirong_list {
		padding-left: 36rpx;
		padding-right: 36rpx;
		width: 100%;
		height: calc(100% - 120rpx);
		box-sizing: border-box;
	}

	.cemian .neirong_box .neirong_list .neirong_item {
		height: 120rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20rpx;
	}

	.cemian .neirong_box .neirong_list .neirong_item .l {
		height: 80rpx;
		width: 80rpx;
	}

	.cemian .neirong_box .neirong_list .neirong_item .t {
		flex: 1;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.cemian .neirong_box .neirong_list .neirong_item .r {
		font-size: 24rpx;
		color: #62748E;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 10rpx;
	}

	.cemian .neirong_box .neirong_list .neirong_item .r image {
		height: 32rpx;
		width: 32rpx;
	}

	.cemian .neirong_box .neirong_list .mianzhi_box {
		display: grid;
		grid-template-columns: repeat(3, 180rpx);
		justify-content: space-between;
		margin: 20rpx 0;
		gap: 22rpx;
	}

	.cemian .neirong_box .neirong_list .mianzhi_box navigator {
		width: 180rpx;
		height: 100rpx;
		color: #020618;
		background-color: #F8FAFC;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
	}
</style>